<template>
  <div class="register-page">
    <van-nav-bar title="注册"/>

    <!-- 表单 -->
    <van-form @submit="onSubmit">
      <!-- input -->
      <van-field
        v-model="username"
        name="username"
        label="用户名"
        placeholder="请输入用户名"
        :rules="[
          {required:true,message:'用户名不能为空'},
          {pattern:/^[\u4e00-\u9fa5a-zA-Z0-9.]{5,}$/ , message:'用户名至少包含5个字符'}
        ]"
      />

      <van-field
        v-model="password"
        name="password"
        type="password"
        label="密码"
        placeholder="请输入密码"
        :rules="[
          {required:true,message:'密码不能为空'},
          {pattern:/^\w{7,}$/ , message:'密码长度错误!'}
        ]"
      />

      <div style="margin: 20px;">
        <van-button block type="info" navtive-type="submit">提交</van-button>
      </div>
    </van-form>

    <!-- 没有账号去注册 -->
    <router-link class="link" to="/login">有账号 , 去登陆</router-link>
  </div>
</template>

<script>
// import { Toast } from 'vant'
import { register } from '../api/user.js'

export default {
  data () {
    return {
      username: 'darkTchr',
      password: '123456789'
    }
  },
  methods: {
    async onSubmit (values) {
      // console.log('submit', values)
      // axios
      // async  await

      // user.js   --> register(data)
      // console.log(register)
      const res = await register(values)
      console.log('页面中的  请求后 的 输出.....')
      console.log('res:', res)

      // toast  loading()  加载中
      // $toast.success()   fail()
      // try cratch --> toast ---> 拦截器.toast

      this.$toast.loading('loading..')

      // try {
      await register(values)
      this.$toast.success('注册成功啦~')
      // } catch (e) {
      //   // 有异常 e代表异常对象
      //   // this.$toast.fail('注册失败!')
      // }
    }
  }
}
</script>
